<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <h1>cors解决跨域</h1>
    <button id="btn">提交请求</button>
    <script>
        const btn = document.querySelector('#btn')
        // 创造一个axios实例
        const myAxios = axios.create({
            baseURL: 'http://127.0.0.1:4545',
            timeout: 10000,
            headers: {
                token:'dsfdgf:wefsdcsd:dfsdfcx' //请求头中设置了token令牌 所以此时简单请求变成了复杂请求
            }


            // ajax请求分为简单请求和复杂请求
            /* 简单请求：1.get和post为简单请求
                        2.简单请求的请求头不能超过以下字段
                          -Accept
                          -Accept-language
                          -Content-Type的值只能是'application/x-www-form-urlencoded'
                         */
            /* 复杂请求：1.put和delete是复杂请求
                        2.不满足简单请求要求的都为复杂请求 */
            // 复杂请求在跨域的时候，会先发送一个空的options(预检请求)查看服务器的权限信息 当遇见请求通过之后 其他的请求才能通过 要是预检请求不能通过 请求就失败
        })
        btn.onclick = async function () {
            
           try{
            const re = await myAxios.get(
                'http://127.0.0.1:4545/userInfo',
                {
                    params: {
                        userId: '001'
                    }
                }

            )
            console.log(re.data);
           }catch(e){
            console.log(e.message,'e.message');
           }
        }
    </script>
</body>

</html>